<template>
    <div>
        <BreadCrumb name1="订单管理" name2="订单列表"></BreadCrumb>
        <el-card>
            <el-row>
                <el-col :span="8">
                    <el-input placeholder="请输入内容" v-model="paramsObj.query" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search" @click="searchOrder"></el-button>
                    </el-input>
                </el-col>
            </el-row>
            <el-table border :data="orderList" style="width: 100%;margin:10px 0;">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="order_number" label="订单编号"></el-table-column>
                <el-table-column prop="order_price" label="订单价格"></el-table-column>
                <el-table-column prop="order_pay" label="是否支付">
                    <el-tag v-if="orderList.order_pay=0" type="danger">未支付</el-tag>
                    <el-tag v-else-if="orderList.order_pay=1">支付宝</el-tag>
                    <el-tag v-else-if="orderList.order_pay=2" type="success">微信</el-tag>
                    <el-tag v-else type="warning">银行卡</el-tag>
                </el-table-column>
                <el-table-column prop="is_send" label="是否发货"></el-table-column>
                <el-table-column prop="create_time" label="下单时间"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scoped">
                        <el-button type="primary" icon="el-icon-edit" circle @click="showUpdateDialog(scoped.row)"></el-button>
                        <el-button type="success" icon="el-icon-location" circle @click="showAdressDialog(scoped.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="paramsObj.pagenum" :page-sizes="[3, 5, 7, 10]" :page-size="paramsObj.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
            <!-- 编辑信息 -->
            <el-dialog title="编辑" :visible.sync="UpdateDialogVisible" width="30%">
                <el-form ref="UpdateOrderFormRef" :model="UpdateOrderForm" :rules="UpdateOrderFormRules" label-width="120px">
                    <el-form-item label="订单是否发货" prop="is_send">
                        <el-input v-model="UpdateOrderForm.is_send"></el-input>
                    </el-form-item>
                    <el-form-item label="订单支付方式" prop="order_pay">
                        <el-input v-model="UpdateOrderForm.order_pay"></el-input>
                    </el-form-item>
                    <el-form-item label="订单价格" prop="order_price">
                        <el-input v-model="UpdateOrderForm.order_price"></el-input>
                    </el-form-item>
                    <el-form-item label="订单数量" prop="order_number">
                        <el-input v-model="UpdateOrderForm.order_number"></el-input>
                    </el-form-item>
                    <el-form-item label="订单支付状态" prop="pay_status">
                        <el-input v-model="UpdateOrderForm.pay_status"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="UpdateDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="UpdateOrderData">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 地址 -->
            <el-dialog title="物流进度" :visible.sync="AdressDialogVisible" width="50%">
                <el-timeline :reverse="true">
                    <el-timeline-item v-for="(item,index) in addressList" :key="index" :timestamp="item.time" style="text-align:left">
                        {{item.context}}
                    </el-timeline-item>
                </el-timeline>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="AdressDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="AdressDialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import BreadCrumb from '@/components/BreadCrumb';
import {Get_AllOrdersList,Get_OneOrderData,Update_OneOrderData,Get_OrderAddress} from '@/api/orders.js';
    export default {
        data(){
            return{
                paramsObj:{//发送请求的参数
                    query:'',
                    pagenum:1,
                    pagesize:5  
                },
                total:1,//总条数
                orderList:[],//存储获取到的所有数据
                UpdateDialogVisible:false,//编辑对话框的显示隐藏
                AdressDialogVisible:false,//地址对话框的显示隐藏
                UpdateOrderForm:{},//存储获取单个数据
                UpdateOrderFormRules:{//编辑提交的校验规则
                    is_send:[
                        { required: true, message: '请输入订单是否发货', trigger: 'blur' }
                    ],
                    order_pay:[
                        { required: true, message: '请输入订单支付方式', trigger: 'blur' }
                    ],
                    order_price:[
                        { required: true, message: '请输入订单价格', trigger: 'blur' }
                    ],
                    order_number:[
                        { required: true, message: '请输入订单数量', trigger: 'blur' }
                    ],
                    pay_status:[
                        { required: true, message: '请输入订单支付状态', trigger: 'blur' }
                    ]
                },
                addressList:[]//存储物流信息数据
            }
        },
        components:{
            BreadCrumb
        },
        mounted(){
            this.getOrdersList();
        },
        methods:{
            // 获取所有订单数据
            async getOrdersList(){//获取所有订单列表
                const result = await Get_AllOrdersList(this.paramsObj);
                if(result.meta.status != 200){//如果状态码不为200 返回错误提示框
                    return this.$message.error('获取失败')
                }
                console.log(result);
                this.orderList = result.data.goods;//赋值给初始值
                this.total = result.data.total;//赋值
                console.log(this.orderList);
                this.orderList.forEach((item)=>{//遍历orderList
                    item.create_time = this.$moment(item.create_time).format("YYYY-MM-DD hh:mm:ss");//转换时间格式
                    item.update_time = this.$moment(item.update_time).format("YYYY-MM-DD hh:mm:ss");//转换时间格式
                })
            },
            // 监听每页多少数据
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);//当每页几条变化时触发
                this.paramsObj.pagesize = val;//将最新数据赋值给data中的参数
                this.getOrdersList();//重新发送请求更新数据
            },
            // 监听页码变化
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);//当页码变化时触发
                this.paramsObj.pagenum = val;//将最新的数据赋值给data中的参数
                this.getOrdersList();//重新发送请求更新数据
            },
            // 获取单个订单数据
            async showUpdateDialog(info){//info为当前行的数据
                const result = await Get_OneOrderData(info.order_id);//获取单个订单数据
                console.log(result);
                if(result.meta.status != 200){//如果状态码不为200 返回错误提示框
                    return this.$message.error('获取失败')
                }
                this.UpdateOrderForm = result.data;//否则赋值初始值
                console.log(this.UpdateOrderForm)
                this.UpdateDialogVisible = true;//显示当前对话框
            },
            // 更改订单数据
            UpdateOrderData(){
                this.$refs.UpdateOrderFormRef.validate(async (valid)=>{//表单验证
                    if(!valid){//如果表单验证不成功 返回错误提示框
                        return this.$message.error('请填写完整信息')
                    }
                    console.log(this.UpdateOrderForm)
                    const result = await Update_OneOrderData({//发送更改请求
                        method:'put',
                        url:`orders/${this.UpdateOrderForm.order_id}`,
                        data:this.UpdateOrderForm
                    });
                    console.log(result);
                    if(result.meta.status != 201){//如果状态码不为201 返回错误提示框
                        return this.$message.error('修改失败')
                    }
                    this.$message.success('修改成功');//否则弹出成功提示框
                    this.UpdateDialogVisible = false;//隐藏当前对话框
                    this.getOrdersList();//重新发送请求 更新数据
                })
            },
            // 获取物流信息
            async showAdressDialog(info){
                console.log(info)//info为当前行数据
                this.AdressDialogVisible = true;//显示当前对话框
                const result = await Get_OrderAddress();//发送请求
                console.log(result);
                if(result.meta.status != 200){//如果状态码不为200 返回错误提示框
                    return this.$message.error('获取物流信息失败')
                }
                this.addressList = result.data;//否则赋值初始值
            },
            // 搜索关键字
            searchOrder(){
                console.log(this.paramsObj.query)
                this.getOrdersList();//根据关键字发送请求
                this.paramsObj.query = ''//清空input框
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>